<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新标签页</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/calendar.css">
    <link rel="stylesheet" href="css/all.min.css">
    <link rel="stylesheet" href="css/news.css">
</head>

<body>
    <div class="container">
        <button id="settings-btn" title="自定义节假日设置按钮">
            <!-- 假设使用 Font Awesome 的设置图标 -->
            <i class="fas fa-cog"></i>
        </button>
        <button id="settings-holiday-work-btn" title="编辑节假日日历调休设置按钮" style="top: 60px;">
            <!-- 假设使用 Font Awesome 的设置图标 -->
            <i class="fas fa-list"></i>
        </button>
        <button id="settings-index-btn" title="编辑昵称导航文案设置按钮" style="top: 100px;">
            <!-- 假设使用 Font Awesome 的设置图标 -->
            <i class="fas fa-bars"></i>
        </button>
        <button id="newspaper-btn" title="资讯按钮" style="top: 140px;">
            <!-- 假设使用 Font Awesome 的设置图标 -->
            <i class="fa fa-paw" aria-hidden="true"></i>
        </button>

        <!-- 主题切换按钮 -->
        <button class="theme-toggle">
            <i class="fas fa-sun"></i>
            <span>切换主题</span>
        </button>

        <!-- 全屏按钮 -->
        <button class="fullscreen-toggle">
            <i class="fas fa-expand"></i>
        </button>

        <!-- 左侧导航菜单 -->
        <div class="nav-menu">
            <div class="profile">
                <div class="avatar"><img src="images/logo.jpg" alt="" srcset=""
                        style="width: 32px;height: 32px;border-radius: 50%;"></div>
                <div class="profile-info">
                    <div id="person_nickname">祺弄先生</div>
                </div>
            </div>
            <div class="nav-content" id="navigation_sites">
                <!-- <a href="https://www.baidu.com" class="nav-item" target="_blank">
                    <span class="nav-icon">百</span>
                    <span>百度</span>
                </a> -->


            </div>
        </div>

        <!-- 中间内容区 -->
        <div class="main-content">
            <div class="time-container">
                <div class="date-text">2024年12月18日星期三</div>
                <div class="clock">12:52:00</div>
            </div>

            <div class="holiday-section">
                <h3>节假日</h3>
                <div class="holiday-card" id="new-year-card">
                    <div class="holiday-icon">元</div>
                    <div class="holiday-info">
                        <div>元旦</div>
                        <div id="new-year-count">距离2025年元旦还有 X 天</div>
                    </div>
                </div>
                <!-- 其他节假日卡片 -->
            </div>

            <div class="schedule-section">
                <div class="schedule-header">
                    <h3 class="schedule-title">便签</h3>
                    <button id="add-note-btn">添加</button>
                    <button id="show-more-btn" style="display: none;">展开</button>
                </div>
                <div class="schedule-content" id="schedule-content">
                    <!-- 便签项将动态添加到这里 -->
                </div>

                <div id="note-modal" class="modal">
                    <div class="modal-content">
                        <span class="close">
                            <img src="images/close.png" alt="关闭" style="width: 20px; height: 20px;" />
                        </span>
                        <!-- 在标题输入框上方添加快捷标题按钮 -->
                        <div class="quick-title-buttons">
                            <button class="quick-title-button">学习日</button>
                            <button class="quick-title-button">考试</button>
                            <button class="quick-title-button">开会</button>
                            <button class="quick-title-button">今日事宜</button>
                            <button class="quick-title-button">一周事宜</button>
                            <button class="quick-title-button">其他</button>
                        </div>
                        <input type="text" id="note-title-input" placeholder="便签标题..." />
                        <textarea id="note-input" placeholder="添加便签内容..." rows="8"></textarea>
                        <div class="reminder-picker">
                            <input type="date" id="reminder-date">
                            <input type="time" id="reminder-time">
                        </div>
                        <div>
                            <button id="save-note-btn">确认</button>
                            <button id="cancel-note-btn">取消</button>
                        </div>
                    </div>
                </div>
            </div>


        </div>

        <!-- 右侧日历区域 -->
        <div class="right-panel">
            <div class="calendar-container">
                <div class="calendar-controls">
                    <select class="calendar-dropdown">
                        <option>假期</option>
                        <option>2024年</option>
                    </select>
                    <select class="calendar-dropdown">
                        <option>12月</option>
                    </select>
                    <div class="calendar-nav">
                        <button class="prev-month">&lt;</button>
                        <button class="next-month">&gt;</button>
                    </div>
                    <button class="today-btn">今天</button>
                </div>

                <div class="calendar">
                    <!-- 星期头部 -->
                    <div class="weekday-header">一</div>
                    <div class="weekday-header">二</div>
                    <div class="weekday-header">三</div>
                    <div class="weekday-header">四</div>
                    <div class="weekday-header">五</div>
                    <div class="weekday-header weekend">六</div>
                    <div class="weekday-header weekend">日</div>

                    <!-- 日期单元格示例 -->
                    <div class="calendar-day">
                        <span class="solar-date">17</span>
                        <span class="lunar-date">十七</span>
                    </div>
                    <!-- 更多日期单元格 -->
                </div>
            </div>
            <div class="weather-container">
                <!-- 今日天气 -->
                <div class="weather-card">
                    <div class="weather-header">
                        <i id="weather-icon" class="fas weather-icon"></i>
                        <span class="weather-date" id="weather-date">2025-04-24</span>
                        <span class="weather-desc" id="weather-description">晴</span>
                    </div>
                    <div class="weather-content">
                        <div class="weather-main">
                            <!-- <i class="fas fa-temperature-low"></i> -->
                            <span class="temperature" id="weather-temperature">23°C</span>
                        </div>
                        <div class="weather-details">
                            <div class="detail-item">
                                <i class="fas fa-wind"></i>
                                <span id="weather-wind"></span>
                            </div>
                            <div class="detail-item">
                                <i class="fas fa-tint"></i>
                                <span id="weather-humidity">湿度 12%</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 明日天气 -->
                <div class="weather-card">
                    <div class="weather-header">
                        <i id="weather-icon1" class="fas weather-icon"></i>
                        <span class="weather-date" id="weather-date1">2025-04-25</span>
                        <span class="weather-desc" id="weather-description1">晴</span>
                    </div>
                    <div class="weather-content">
                        <div class="weather-main">
                            <!-- <i class="fas fa-temperature-low"></i> -->
                            <span class="temperature" id="weather-temperature1">24°C</span>
                        </div>
                        <div class="weather-details">
                            <div class="detail-item">
                                <i class="fas fa-wind"></i>
                                <span id="weather-wind1"></span>
                            </div>
                            <div class="detail-item">
                                <i class="fas fa-tint"></i>
                                <span id="weather-humidity1">湿度 21%</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 添加模型显示区域 -->
    <div id="model-container">
        <div class="tooltip"></div>
        <img id="dynamic-gif" src="images/IMG_4388.gif" alt="模型"
            style="width: 100px; height: 100px; border-radius: 50px; cursor: pointer;">
    </div>
    <!-- 编辑节假日 -->
    <div id="modal-overlay"
        style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 999;">
    </div>
    <div id="holiday-editor"
        style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000;">
        <span class="close"><img src="images/close.png" alt="关闭" style="width: 20px; height: 20px;" /></span>
        <h2>编辑节假日（文件保存到当前插件根目录）</h2>
        <textarea id="holiday-json" rows="20" cols="100"></textarea>
        <button id="save-button">保存</button>
    </div>
    <!-- 节假日日历调休显示情况 -->
    <div id="holiday-work-editor"
        style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000;">
        <span class="close"><img src="images/close.png" alt="关闭" style="width: 20px; height: 20px;" /></span>
        <h2>编辑节假日日历调休（文件保存到当前插件根目录）</h2>
        <textarea id="holiday-work-json" rows="20" cols="100"></textarea>
        <button id="save-holiday-work-button">保存</button>
    </div>
    <!-- 节假日日历调休显示情况 -->
    <div id="index-editor"
        style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000;">
        <span class="close"><img src="images/close.png" alt="关闭" style="width: 20px; height: 20px;" /></span>
        <h2>编辑昵称文案导航网站（文件保存到当前插件根目录）</h2>
        <textarea id="index-json" rows="20" cols="100"></textarea>
        <button id="save-index-button">保存</button>
    </div>
    <!-- 资讯详情 -->
    <div id="newspaper-details"
        style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000;">
        <span class="close"><img src="images/close.png" alt="关闭" style="width: 20px; height: 20px;" /></span>
        <h2>资讯</h2>
        <div class="tab-container">
            <div class="tab-buttons">
                <button class="tab-button active" data-tab="tab1" data-count="0">知乎</button>
                <button class="tab-button" data-tab="tab2" data-count="1">微博</button>
                <button class="tab-button" data-tab="tab3" data-count="2">头条</button>
                <button class="tab-button" data-tab="tab4" data-count="3">澎湃</button>
                <button class="tab-button" data-tab="tab5" data-count="4">虎扑</button>
                <button class="tab-button" data-tab="tab6" data-count="5">知乎日报</button>
                <button class="tab-button" data-tab="tab7" data-count="6">36Ke</button>
                <button class="tab-button" data-tab="tab8" data-count="7">虎嗅</button>
                <button class="tab-button" data-tab="tab9" data-count="8">IT之家</button>
                <button class="tab-button" data-tab="tab10" data-count="9">人人都是产品经理</button>
            </div>
            <div class="tab-content active" id="tab1"></div>
            <div class="tab-content" id="tab2"></div>
            <div class="tab-content" id="tab3"></div>
            <div class="tab-content" id="tab4"></div>
            <div class="tab-content" id="tab5"></div>
            <div class="tab-content" id="tab6"></div>
            <div class="tab-content" id="tab7"></div>
            <div class="tab-content" id="tab8"></div>
            <div class="tab-content" id="tab9"></div>
            <div class="tab-content" id="tab10"></div>
        </div>
    </div>
    <!-- 加载中 -->
    <div id="modal-all"
        style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999;">
        <i class="fa fa-spinner fa-pulse fa-3x fa-fw loading-all"></i>
        <span class="loading-all" style="margin-top: 50px;">加载中...</span>
    </div>
    <!-- 添加提示弹窗 -->
    <div id="notification" class="notification" style="display: none;">
        <span id="notification-message"></span>
    </div>

    <script src="lib/chinese-lunar.min.js"></script>
    <script type="module" src="js/calendar.js"></script>
    <script src="js/confirm-dialog.js"></script>
    <script type="module" src="js/main.js"></script>
</body>

</html>